<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@renderer/store/user'

import HeaderView from '@renderer/components/layout/HeaderView.vue'
import Avartar from '@renderer/components/common/Avartar.vue'
import UnreadPrompt from '@renderer/components/common/UnreadPrompt.vue'

import ChatIcon from '@renderer/assets/svg/chat.svg'
import FriendsIcon from '@renderer/assets/svg/friends.svg'
import ZoneIcon from '@renderer/assets/svg/zone.svg'
import MenuIcon from '@renderer/assets/svg/menu.svg'
import PanIcon from '@renderer/assets/svg/pan.svg'
import ShareIcon from '@renderer/assets/svg/share.svg'
import PonentIcon from '@renderer/assets/svg/ponent.svg'
import DeleteIcon from '@renderer/assets/svg/delete.svg'

const PAGES = [
    {
        title: 'IM',
        imageSrc: ChatIcon,
        routeName: 'chat'
    },
    {
        title: '空间',
        imageSrc: ZoneIcon,
        routeName: 'Zone'
    }
]
const navigator_activeIndex = ref(0)

const router = useRouter()

const user = useUserStore()

function changePage(item, index) {
    navigator_activeIndex.value = index
    router.push({ name: item.routeName })
}

function openMenu() {
    console.log('menu')
}
</script>

<template>
    <div class="container">
        <div class="side-panel">
            <div class="main">
                <avartar
                    class="avartar"
                    status="online"
                    size="40px"
                    local-image-size="33px"
                    basecolor="var(--bg-color-3)"
                    border-color="transparent"
                    border-color-active="var(--theme-color)"
                    :src="user.info.avartar"
                    title="我的"
                />
                <div class="navigator">
                    <div
                        v-for="(item, index) in PAGES"
                        :key="item.title"
                        :class="{
                            'navigator-item': true,
                            'navigator-selected': index == navigator_activeIndex
                        }"
                        :title="item.title"
                        @click="changePage(item, index)"
                    >
                        <div class="img-box">
                            <img :src="item.imageSrc" />
                        </div>
                        <unread-prompt v-if="false" class="navigator-unread-prompt" number="2" />
                    </div>
                    <!-- 每次改变activeIndex都动态计算指示框位置 -->
                    <div class="indicator"
                        :style="`top:${navigator_activeIndex * 59 - 8}px;`"
                    ></div>
                </div>
            </div>
            <div class="footer">
                <div class="menu-container" title="主菜单" @click="openMenu">
                    <img :src="MenuIcon" />
                </div>
            </div>
        </div>
        <div class="content-panel">
            <header-view bg-color="var(--bg-color-1)" />
            <router-view />
        </div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';
@import '@renderer/assets/scss/constants';

$gap-between-navigator-avartar: 35px;

.navigator {
    $indicator-size: 45px;
    $indicator-border-radius: 10px;
    $gap-between-items: 25px;
    $icon-size: 30px;
    $unread-prompt-top: -10px;
    $unread-prompt-right: 10px;

    @include set-size($width: 100%, $height: auto);
    position: relative;
    text-align: center;
    margin-top: $gap-between-navigator-avartar;

    .indicator {
        @include set-size($indicator-size, $indicator-size);
        position: absolute;
        background-color: var(--bg-color-4);
        left: calc(50% - 0.5 * $indicator-size);
        border-radius: $indicator-border-radius;
        z-index: 0;

        transition: {
            duration: $DEFAULT-ANIMATION-DURATION;
            timing-function: ease-in-out;
        }
    }

    .navigator-item {
        margin-top: $gap-between-items;
        position: relative;
        z-index: 1; // z-index只在position!=static时生效

        .img-box {
            @include overspread;
            overflow: hidden;
            img {
                @include set-size($icon-size, $icon-size);
                @include img-dye(var(--fg-color-4));
            }
        }

        .navigator-unread-prompt {
            position: absolute;
            top: $unread-prompt-top;
            right: $unread-prompt-right;
        }

        &:first-child {
            margin-top: 0px;
        }

        &:hover {
            img {
                @include img-dye(var(--theme-color));
            }
        }
    }

    .navigator-selected {
        img {
            @include img-dye($color: var(--theme-color), $important: true);
        }
    }
}

.container {
    $side-panel-width: 75px;

    @include overspread;
    display: flex;
    background-color: var(--bg-color-1);

    .side-panel {
        $main-view-margin-top: 15px;
        $footer-view-margin-bottom: 13px;
        $menu-icon-size: 30px;

        @include set-size($width: $side-panel-width);
        background-color: var(--bg-color-3);
        -webkit-app-region: drag;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;

        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: $main-view-margin-top;

            .avartar {
                cursor: pointer;
            }
        }

        .footer .menu-container {
            overflow: hidden;
            margin-bottom: $footer-view-margin-bottom;

            img {
                @include set-size($menu-icon-size, $menu-icon-size);
                @include img-dye(var(--fg-color-4));
            }

            &:hover {
                img {
                    @include img-dye(var(--fg-color-1));
                }
            }
        }
    }

    .content-panel {
        flex-grow: 1;
        width: calc(100% - $side-panel-width)
    }
}
</style>
